<div *ngIf="show">
  <p>loading...</p>
</div>
<div *ngIf="!show" class="produce flex_column flex_space_between" [@flyIn]="active">
  <div>
    <div>
      <button class="btn btn-primary" (click)="addParentDir()"><i class="fa fa-pencil-square-o"></i>新增父类别</button>
      <!--<button id="mosifyContent" (click)=modifyProduce()><i class="fa fa-edit"></i>修改</button>-->
      <!--<button id="modifySort" (click)=modifySort()><i class="fa fa-sort-numeric-asc"></i>修改排序</button>-->
      <!--<button class="member_delete" (click)=deleteProduce()><i class="fa fa-trash"></i>删除</button>-->

    </div>
    <div class="form-group form-inline" style="margin:20px 0;" *ngIf="showAddParent" [@flyIn]="active">
      <label for="parentName">父类别名称:</label>
      <input type="text" id="parentName" [(ngModel)]="newParentDir" class="form-control" placeholder="请输入父类别名称" name="parentName">
      <button class="btn btn-primary btn-sm" (click)="saveParentDir()">保存</button>
      <button class="btn btn-primary btn-sm" (click)="concelAddDir()">取消</button>
    </div>
    <div style="margin-top:20px;">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default" *ngFor="let category of categorys;let i =index">
          <div class="panel-heading flex_row flex_space_between" role="tab" id="headingOne">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{i}}">
                {{category.catagoryName}}
              </a>
            </h4>
            <div>
              <span>{{category.id}}</span>
              <button class="btn btn-primary btn-sm" (click)=addChildDirector(category.id)>新增子类</button>
              <button class="btn btn-primary btn-sm" (click)="deleteParentDir(category.id)">删除父类</button>
            </div>
          </div>
          <div id={{i}} class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <table class="table table-bordered table-hover">
              <thead>
              <tr>
                <td *ngFor="let thead of theads">{{thead}}</td>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let subCatagory of category.subCatagories">
                <td>
                  {{subCatagory.catagoryName}}
                </td>
                <td>
                  {{subCatagory.content}}
                </td>
                <td>
                  {{subCatagory.icon}}
                </td>
                <td>
                  <button class="btn btn-primary btn-sm" (click)="editSubCategory(subCatagory)">修改</button>
                  <button class="btn btn-primary btn-sm" (click)="deleteSubCategory(subCatagory)">删除</button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div [hidden]="!showBoolean" class="serviceUnique">
    <div class="closeIcon" (click)="closeAddChildModal()">
      X
    </div>
    <div class="form-group">
      <label for="cateName">子类名称:</label>
      <input [(ngModel)]="categoryUniqueDetail.catagoryName" (blur)="childCateoryNameHandle($event)" name="childCateoryName" id="cateName" placeholder="请输入子类名字" type="text" class="form-control">
    </div>
    <div class="form-group">
      <label for="cateIntr">子类介绍文字</label>
      <textarea [(ngModel)]="categoryUniqueDetail.content" (blur)="childCateoryIntroHandle($event)" rows="3" name="childCateoryIntro" id="cateIntr" placeholder="子类介绍文字" class="form-control"></textarea>
    </div>
    <div>
      <input type="file" id="input-gly-9" name="file" multiple class="file-loading">
    </div>
    <div class="form-group" style="padding:20px;">
      <button class="btn btn-primary btn-sm" (click)="onSubmit()">保存</button>
    </div>
  </div>
  <div class="confirm_delete" *ngIf="showDeleteConfirm">
    <div class="confirm_div">
      <div class="confirm_part1 flex flex_row flex_space_between">
        <div>信息</div>
        <span class="fa fa-times-circle" (click)="closeConfirm()"></span>
      </div>
      <div class="confirm_part2">
        <p>确定执行？</p>
      </div>
      <div class="confirm_part3">
        <button class="confirm_sure" (click)="deleteProduceSure()">确定</button>
        <button class="confirm_concel" (click)="closeConfirm()">取消</button>
      </div>
    </div>
  </div>
</div>
